<template>
  <div>
    <el-table :data="tableData" border style="width: 100%" :row-class-name="tableRowClassName">>
      <el-table-column fixed prop="course_title" label="课程标题" width="150"></el-table-column>    
      <el-table-column prop="course_id" label="课程号" width="120"></el-table-column>     
      <el-table-column prop="course_chapter" label="课程章节" width="120"> </el-table-column>
      <el-table-column prop="course_type" label="课程类型" width="120"> </el-table-column>
      <el-table-column prop="course_hourse" label="课程时长" width="120"></el-table-column>     
      <el-table-column prop="course_studyNumber" label="学习人数" width="120"> </el-table-column>
      <el-table-column prop="course_brief" label="课程介绍" width="420"> </el-table-column>
      <el-table-column prop="course_tutor" label="讲师Id" width="120"> </el-table-column>
      <el-table-column prop='course_image' label="课程图片" width="200" >
        <template v-slot:default="scope">
            <img :src="url+scope.row.course_image" alt="" style="width:100px">
        </template>
     </el-table-column>
      <el-table-column prop="course_fees" label="课程价格" width="120"> </el-table-column>
      <el-table-column prop="course_teach" label="讲师昵称" width="120"> </el-table-column>
      <el-table-column prop="course_video" label="视频地址" width="120"> </el-table-column>
      <el-table-column prop="course_detail_img" label="视频详情图片" width="200"> 
        <template v-slot:default="scope">
            <img :src="url+scope.row.course_detail_img" alt="" style="width:100px;height:100px">
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click.native.prevent="handleClick(scope.$index, tableData)" type="text" size="small"
            >删除</el-button
          >
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
    data() {
        return {
           tableData:[],
           url:'http://127.0.0.1:8080'
        }
    },
    methods: {
        handleClick(index,row) {
          console.log(row);
          console.log(index)
          console.log(row[index].course_id)
          // 向后端发送删除请求axios
          let  url=`http://localhost:8080/index/remove?course_id=${row[index].course_id}`
          this.axios.delete(url).then((res)=>{
            console.log(res)
          })
          row.splice(index, 1);
        },
        //向后端请求数据
        getData() {
        let url = "http://localhost:8080/index/selectCourse";
        this.axios.get(url).then((res) => {
            console.log(res.data.result);
            this.tableData = res.data.result;
        });
        },
   
            // 表格颜色
        tableRowClassName({row, rowIndex}){
        if (rowIndex%2 === 1) {
          return 'warning-row';
        } else if (rowIndex%2 === 0) {
          return 'success-row';
        }
        return '';
      }

    },
 // 页面加载请求数据
  mounted() {
    this.getData();
  },
};
</script>

<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>